<template>
  <el-dialog v-if="load" title="发货仓库" v-model="visible" align-center width="800px" @close="handleClose" :close-on-click-modal="false">
    <div style="height: 500px;">
      <VTable ref="tableRef" v-bind="tableOptins">
        <template #form="{ form }">
          <VGroup>
            <div class="v-group-item">仓库</div>
            <el-select v-model="form.create_user" style="max-width: 160px" collapse-tags clearable placeholder="状态">
              <el-option v-for="(d, i) in []" :key="i" :label="d.label" :value="d.value"></el-option>
            </el-select>
          </VGroup>
          <VGroup>
            <div class="v-group-item">运输方式</div>
            <el-input style="max-width: 160px"></el-input>
          </VGroup>
        </template>


      </VTable>
    </div>
    <template #footer>
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" :loading="loadings.submit" @click="submit">保 存</el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { reactive } from 'vue';
import api from '../api'
import { ElMessage } from 'element-plus'
const load = ref(false)
const visible = ref(false)
let loadings = reactive({})

const emit = defineEmits(['close'])
const tableOptins = reactive({
  data: [],
  columns: [
    { type: 'checkbox', fixed: 'left', width: 40 },
    { field: '', title: '平台', },
    { field: '', title: '运输方式' }
  ]
})
// 打开弹窗
const open = async (selection) => {
  if (selection && !selection.length) {
    ElMessage.warning('请先选择行!')
    return
  }
  if (!load.value) {
    load.value = true
    await 1
  }
  loadings = reactive({})
  visible.value = true
}
// 关闭弹窗
const close = () => {
  visible.value = false
}

const handleClose = () => {
  emit('close')
}
// 提交
const submit = () => {
  loadings.submit = true
  api.submit().then(res => {
    close()
  }).finally(() => {
    loadings.submit = false
  })
}
defineExpose({ open })
</script>